﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
    <meta http-equiv="expires" content="0" />
    <title>FaceCat</title>
</head>
<body>
    <canvas id="mycanvas" width="1000" height="700" style="position: fixed; left: 0px; top: 0px;"/>
    <script type="text/javascript" src="facecat.js"></script>
    <script type="text/javascript">
        let canvas = document.getElementById("mycanvas"); //绘图区域
        let context = canvas.getContext("2d"); //绘图上下文
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        let gPaint = new FCPaint(); //绘图对象
        gPaint.canvas = canvas;
        scaleCanvas(gPaint);
        //判断是否移动端
        gPaint.isMobile = isMobileMode();
        if (gPaint.isMobile) {
            gPaint.scaleFactorX = 2.5;
            gPaint.scaleFactorY = 2.5;
        }
        //判断主题色
        gPaint.defaultUIStyle = "light";

        let addingItem = "";

        let colors = new Array();
        colors.push("rgb(170, 178, 189)");
        colors.push("rgb(140, 192, 81)");
        colors.push("rgb(59, 174, 218)");
        colors.push("rgb(219, 68, 83)");
        colors.push("rgb(246, 187, 67)");
        colors.push("rgb(216, 112, 173)");
        colors.push("rgb(150, 123, 220)");
        colors.push("rgb(75, 137, 220)");
        colors.push("rgb(185, 63, 150)");
        colors.push("rgb(233, 87, 62)");

        let hideTextBox = null;

        /*
        * 创建文本框实体
        */
        let createTextBox = function () {
            let input = document.createElement("input");
            input.type = "text";
            input.style.position = "absolute";
            input.style.display = "none";
            input.style.boxSizing = "border-box";
            document.body.appendChild(input);
            hideTextBox = input;
        };
        createTextBox();

        /*
        * 点击方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        * clicks:点击次数
        */
        let onClick = function (view, firstTouch, firstPoint, secondTouch, secondPoint, clicks) {
            onClickDefault(view, firstTouch, firstPoint, secondTouch, secondPoint, clicks);
            if(view.viewType == "rectitem"){
                addingItem = "rect";
            }else if(view.viewType == "ellipseitem"){
                addingItem = "ellipse";
            }
            else if(view.viewType == "rect" || view.viewType == "ellipse"){
                if(clicks == 2){
                    let canvas = gPaint.canvas;
                    let rect = canvas.getBoundingClientRect();
                    let newTop = rect.top + document.documentElement.scrollTop;
                    let newLeft = rect.left + document.documentElement.scrollLeft;
                    let clipRect = view.clipRect;
                    let relativeRect = new FCRect(newLeft + clipRect.left * view.paint.scaleFactorX, newTop + clipRect.top * view.paint.scaleFactorY, newLeft + clipRect.right * view.paint.scaleFactorX, newTop + clipRect.bottom * view.paint.scaleFactorY);
                    relativeRect.left += 10;
                    relativeRect.right -= 10;
                    relativeRect.top = relativeRect.top + (relativeRect.bottom - relativeRect.top) / 2 - 10;
                    relativeRect.bottom = relativeRect.top + 20;
                    hideTextBox.style.left = relativeRect.left + "px";
                    hideTextBox.style.top = relativeRect.top + "px";
                    hideTextBox.style.width = (relativeRect.right - relativeRect.left  ) + "px";
                    hideTextBox.style.height = (relativeRect.bottom - relativeRect.top) + "px";
                    hideTextBox.style.backgroundColor = convertColor(view.backColor);
                    hideTextBox.style.border = "1px solid " + convertColor(view.borderColor);
                    hideTextBox.style.color = convertColor(view.textColor);
                    hideTextBox.value = view.text;
                    hideTextBox.style.display = "block";
                    hideTextBox.view = view;
                    view.text = "";
                    invalidate(gPaint);
                }
            }
            if(view.viewName == "div2"){
                if(addingItem.length > 0){
                    let div = findViewByName("div2", gPaint.views);
                    let view = new FCView();
                    view.viewType = addingItem;
                    view.borderColor = "rgb(0,0,0)";
                    view.backColor = colors[div.views.length % colors.length];
                    view.textColor = "rgb(0,0,0)";
                    view.text = "标题";
                    view.font =  "Default,16";
                    view.size = new FCSize(100, 100);
                    view.location = new FCPoint(firstPoint.x, firstPoint.y);
                    view.viewType = addingItem;
                    view.allowDrag = true;
                    view.allowResize = true;
                    addViewToParent(view, div);
                    gPaint.focusedView = view;
                    invalidate(gPaint);
                    addingItem = "";
                }
            }
        };

        /*
        * 鼠标按下实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseDown = function (view, mp, buttons, clicks, delta) {
            onMouseDownDefault(view, mp, buttons, clicks, delta);
            if(view.viewType == "rect" || view.viewType == "ellipse"){
                let div = findViewByName("div2", gPaint.views);
                removeViewFromParent(view, div);
                addViewToParent(view, div);
                invalidate(gPaint);
            }
            if(hideTextBox.style.display == "block"){
                hideTextBox.view.text = hideTextBox.value;
                hideTextBox.style.display = "none";
                invalidate(gPaint);
            }
        };

        /*
        * 鼠标移动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseMove = function (view, mp, buttons, clicks, delta) {
            onMouseMoveDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 鼠标滚动实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseWheel = function (view, mp, buttons, clicks, delta) {
            if (window.event.ctrlKey && view.paint) {
                if (delta < 0) {
                    view.paint.scaleFactorX = view.paint.scaleFactorX + 0.1;
                    view.paint.scaleFactorY = view.paint.scaleFactorY + 0.1;
                    resizeAll();
                } else if (delta > 0) {
                    if (view.paint.scaleFactorX > 0.2) {
                        view.paint.scaleFactorX = view.paint.scaleFactorX - 0.1;
                        view.paint.scaleFactorY = view.paint.scaleFactorY - 0.1;
                        resizeAll();
                    }
                }
                return;
            }
            onMouseWheelDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 鼠标抬起实现方法
        * view:视图
        * mp:坐标
        * button:按钮
        * clicks:点击次数
        * delta:滚轮值
        */
        let onMouseUp = function (view, mp, buttons, clicks, delta) {
            onMouseUpDefault(view, mp, buttons, clicks, delta);
        };

        /*
        * 触摸开始方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchBegin = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            onTouchBeginDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
        };

        /*
        * 触摸移动方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchMove = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            onTouchMoveDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
        };

        /*
        * 触摸结束方法
        * view:视图
        * firstTouch:是否第一次触摸
        * firstPoint:第一次触摸的坐标
        * secondTouch:是否第二次触摸
        * secondPoint:第二次触摸的坐标
        */
        let onTouchEnd = function (view, firstTouch, firstPoint, secondTouch, secondPoint) {
            onTouchEndDefault(view, firstTouch, firstPoint, secondTouch, secondPoint);
        };

        /*
        * 重绘背景的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        gPaint.onPaint = function (view, paint, clipRect) {
            if(view.viewType == "ellipse"){
                paint.fillEllipse(view.backColor, 1, 1, view.size.cx - 1, view.size.cy - 1);
                let text = view.text;
                if(text.length > 0){
                    let tSize = paint.textSize(text, view.font);
                    paint.drawText(text, view.textColor, view.font, (view.size.cx - tSize.cx) / 2, (view.size.cy - tSize.cy) / 2);
                }
            }else if(view.viewType == "rect"){
                paint.fillRect(view.backColor, 0, 0, view.size.cx, view.size.cy);
                let text = view.text;
                if(text.length > 0){
                    let tSize = paint.textSize(text, view.font);
                    paint.drawText(text, view.textColor, view.font, (view.size.cx - tSize.cx) / 2, (view.size.cy - tSize.cy) / 2);
                }
            }else if(view.viewType == "rectitem"){
                paint.drawRect("rgb(0,0,0)", 1, 0, 10, 10, view.size.cx - 10, view.size.cy - 10);
            }else if(view.viewType == "ellipseitem"){
                paint.drawEllipse("rgb(0,0,0)", 1, 0, 10, 10, view.size.cx - 10, view.size.cy - 10);
            }else{
                onPaintDefault(view, paint, clipRect);
            }
        };

        /*
        * 重绘边框的实现方法
        * view:视图
        * paint:绘图对象
        * clipRect:裁剪区域
        */
        gPaint.onPaintBorder = function (view, paint, clipRect) {
            if(view.viewType == "ellipse"){
                paint.drawEllipse(view.borderColor, 1, 0, 1, 1, view.size.cx - 1, view.size.cy - 1);
            }else if(view.viewType == "rect"){
                paint.drawRect(view.borderColor, 1, 0, 0, 0, view.size.cx, view.size.cy);
            }else{
                onPaintBorderDefault(view, paint, clipRect);
                if(view.viewName == "div2"){
                    if(paint.focusedView && (paint.focusedView.viewType == "rect" || paint.focusedView.viewType == "ellipse")){
                        let width = paint.focusedView.size.cx, height = paint.focusedView.size.cy;
                        var drawPoints = new Array();
                        drawPoints.push(new FCPoint(0, 0));
                        drawPoints.push(new FCPoint(width / 2, 0));
                        drawPoints.push(new FCPoint(width, 0));
                        drawPoints.push(new FCPoint(0, height / 2));
                        drawPoints.push(new FCPoint(0, height));
                        drawPoints.push(new FCPoint(width / 2, height));
                        drawPoints.push(new FCPoint(width, height));
                        drawPoints.push(new FCPoint(width, height / 2));
                        let pR = 5;
                        let x = paint.focusedView.location.x;
                        let y =  paint.focusedView.location.y;
                        for(let i = 0; i < drawPoints.length; i++){
                            let point = drawPoints[i];
                            paint.fillRect(view.backColor, x + point.x - pR, y + point.y - pR, x + point.x + pR, y + point.y + pR);
                            paint.drawRect("rgb(0,0,0)", 1, 0, x + point.x - pR, y + point.y - pR, x + point.x + pR, y + point.y + pR);
                        }
                    }
                }
            }
        };

        /*
        * 更新布局的实现方法
        * views:视图集合
         */
        gPaint.onUpdateView = function (views) {
            updateViewDefault(views);
        }

        /*
         * 重置大小
         */
        let resizeAll = function () {
            try {
                canvas.width = document.documentElement.clientWidth;
                canvas.height = document.documentElement.clientHeight;
                scaleCanvas(gPaint);
                updateView(gPaint.views);
            } catch (err) {
                //alert(err);
            }
            invalidate(gPaint);
        };

        /*
        * 监听大小改变
        */
        window.onresize = function () {
            resizeAll();
        };

        /*
        * 旋转监听
        */
        window.onorientationchange = function () {
            resizeAll();
        };

        //注册事件
        addMouseDownEvent(canvas, gPaint, onMouseDown);
        addMouseMoveEvent(canvas, gPaint, onMouseMove);
        addMouseWheelEvent(canvas, gPaint, onMouseWheel);
        addMouseUpEvent(canvas, gPaint, onMouseUp, onClick);
        addTouchBeginEvent(canvas, gPaint, onTouchBegin);
        addTouchMoveEvent(canvas, gPaint, onTouchMove);
        addTouchEndEvent(canvas, gPaint, onTouchEnd, onClick);

        /*
        * 更新悬浮状态
        * views:视图集合
        */
        let updateView = function (views) {
            updateViewDefault(views);
        };

        //解析加载XML
        let xml = `<?xml version="1.0" encoding="utf-8" ?>
<html xmlns="facecat">
<head>
</head>
<body>
    <div type="splitlayout" layoutstyle="toptobottom" bordercolor="none" splitterposition="50,1"
        dock="fill" size="400,400" candragsplitter="true">
        <div type="layout" name="div1">
            <input type="custom" cid="rectitem" size="50,50"/>
            <input type="custom" cid="ellipseitem" size="50,50"/>
        </div>
        <div name="div2" />
    </div>
</body>
</html>
        `;
        renderFaceCat(gPaint, xml);
        
    </script>
</body>
</html>
